<template>
 <view class="business">
   <view class="nav d_f j_c_c a_i_c">
	   <view class="text">Create my OPAI wallet</view>
   	<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
   </view>
   <image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
   <view class="box d_f a_i_c f_d_c">
	   <view class="title">In the next step, you will see the mnemonics (12 words) that can reply to the wallet. Please remember the safety points.</view>
	   <u-radio-group v-model="value"  active-color="#00ffcc">
	   			<u-radio 
	   				class="m_t_10"
	   				v-for="(item, index) in list" :key="index" 
	   				:name="item.value"
	   			>
	   			<view class="word m_l_10">{{item.name}}</view>	
	   			</u-radio>
				
	   		</u-radio-group>
			 <view class="button d_f j_c_c a_i_c" @tap="continueUp">next</view>
   </view>
 </view>
</template>

<script>
 export default {
   data () {
     return {
     value:0,
	 list: [
	 				{
	 					name: 'If I lose my mnemonics, my assets will be lost forever!',
						value:0,
	 				},
	 				{
	 					name: 'The responsibility for protecting the mnemonics lies with me!',
						value:1,
	 				},
	 				{
	 					name: 'If I disclose or share my mnemonics to anyone, my assets may be stolen',
						value:2,
	 				}
	 			],
     }
   },
   components: {

   },
   methods: {
      back(){
      	uni.navigateBack({
      		delta: 1
      	});
      },
	  //下一步
	  continueUp(){
		  uni.setStorageSync('value',this.value)
		 uni.navigateTo({
		 	url:'/pages/index/auxiliaryWord'
		 }) 
	  }
   },
   onShow() {

   },
   onLoad(options) {
     this.value=Number(uni.getStorageSync('value'))
   },
   watch: {

   },
   computed: {

   }
 }
</script>

<style scoped lang='scss'>
.business{
	width: 100%;
	min-height: 100%;
	background: rgb(239, 237, 238);
	position: relative;
	.nav {
		width: calc(100% - 64rpx);
		height: 160rpx;
		margin-left: 32rpx;
		position: relative;
	    z-index: 9999;
	    .text {
	    	font-size: 32rpx;
	    	font-weight: 700;
	    color: #FFFFFF;
	    }
		.right {
			width: 20rpx;
			height: 32rpx;
			position: absolute;
			left: 0rpx;
			z-index: 999;
			transform: rotate(180deg);
		}
	}
	.header{
		 position: absolute;
		 top: 0rpx;
		 width: 100%;
		 height: 229rpx;
		 z-index: 1;
	}
	.box{
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 100rpx;
		background-size: 100% 100%;
		padding: 64rpx 32rpx;
			.title{
				font-weight: 700;
				font-size: 32rpx;
			}
			.word{
				word-wrap: break-word;
				width: 600rpx;
			}
	}
.button{
		width: 640rpx;
		border-radius: 40rpx;
		background: rgb(101,186,144);
		color: #FFFFFF;
		height: 100rpx;
		margin-top: 40rpx;
		font-weight: 700;
		position: fixed;
		bottom: 32rpx;
	}
	
}
</style>